<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>记录</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/jiazai.css">
    <link rel="stylesheet" href="css/mui.min.css">
    <style>
        p {
            margin: 0;
            padding: 0;
        }
        
        .hea-con {
            position: fixed;
            top: 10px;
            right: 0;
            left: 0;
            padding: 0 20px;
            box-sizing: border-box;
            font-size: 16px;
            color: white;
            opacity: .7;
        }
        
        .tit-er-wrap {
            position: fixed;
            top: 40px;
            right: 0;
            left: 0;
            font-size: 15px;
            color: #9197ae;
        }
        
        .tit-er-wrap>span {
            flex: 1 1 0;
            padding: 15px 0;
            text-align: center;
        }
        
        .tit-er-wrap>.er-active {
            font-size: 17px;
            color: #2590FE;
            border-bottom: 1px solid #2590fe;
        }
        
        .change-type-active {
            font-size: 18px;
            color: white;
        }
        
        .shou-content {
            position: fixed;
            top: 50px;
            right: 0;
            left: 0;
            bottom: 0;
            overflow: auto;
        }
        
        .shou-list {
            padding: 15px 0;
            border-bottom: 1px solid rgba(25, 25, 25, .2);
        }
        
        .shou-list h2 {
            font-size: 14px;
            color: white;
        }
        
        .shou-list p {
            padding-top: 4px;
            color: #9197ae;
        }
        
        .shou-list span {
            font-size: 16px;
            color: #1AD386;
        }
        
        .dem-wrap {
            margin-bottom: 10px;
            background: #353742;
        }
        
        .dem-wrap>div:first-of-type {
            padding: 15px 20px;
        }
        
        .dem-wrap>div:last-of-type {
            padding: 0 20px;
        }
        
        .kon-count>span:first-of-type {
            font-size: 20px;
            color: white;
        }
        
        .kon-count>span:last-of-type {
            font-size: 14px;
            color: #1AD386;
        }
        
        .kon-zhuan {
            font-size: 12px;
        }
        
        .kon-info {
            padding-top: 15px;
            padding-bottom: 15px;
            border-top: 1px solid rgba(0, 0, 0, .2);
        }
        
        #no-date {
            padding: 15px;
            text-align: center;
            font-size: 15px;
            color: #999;
        }
    </style>
</head>

<body style="background:#2a2c35;">
    <div id='app'>


        <!-- 加载中动画 -->
        <div id='jiazai-ani' v-if='jiazai'>
            <div class="arc"></div>
            <h1><span>LOADING</span></h1>
        </div>
        <!-- 加载中动画 -->

        <div class='hea-con dis-spa'>
            <img @click='_close()' src="./img/left.svg" width="22px" height="22px">
            <span>
                    矿池合约
                </span>
            <span style="opacity:0">1</span>
        </div>

        <div class='shou-content' id='pullrefresh'>
            <div>
                <div>
                    <div class='dem-wrap' v-for="(val,index) in billList" :key='index'>
                        <div>
                            <p class='dis-spa kon-count'>
                                <span v-text='val.text1'>280.11</span>
                                <span v-text="val.text2==1?'未解锁':'已解锁'" :style="{'color':val.text2==1?'#F25B5B':''}">待解锁</span>
                            </p>
                            <p class='dis-spa kon-zhuan'>
                                <span>矿池合约</span>
                                <span>解锁状态</span>
                            </p>
                        </div>
                        <div>
                            <div class='dis-spa kon-info' @click="goInfo(val.airdropid)">
                                <span style="color: #8f8f94;" v-text='val.text3'>2018年12月1日</span>
                                <p class='dis-spa'>
                                    <span>详情</span>
                                    <img src="./img/right.svg" style="width:15px;height:15px;">
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id='no-date' v-if='!billList.length'>
                    暂无更多数据
                </div>
            </div>
        </div>
    </div>
    <script src="js/comm.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/mui.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                jiazai: false,
                page: 1,
                billList: []
            },
            created: function() {
                this.getData();
            },
            methods: {
                getData: function(off) {
                    if (off == 1 && plus.os.name.toLowerCase() == 'ios') {
                        $('#no-date').remove();
                    }
                    var This = this;
                    This.jiazai = true;
                    var user = JSON.parse(localStorage.getItem('cc_user'));
                    _post(HUO_KON, {
                        userid: user.userid,
                        session: user.session,
                        page: This.page
                    }, function(data) {
                        This.jiazai = false;
                        if (data.status == 1) {
                            for (var i = 0; i < data.back.length; i++) {
                                This.billList.push(data.back[i]);
                            }
                            if (data.back.length == 0) {
                                //没有更多数据
                                mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                            } else {
                                //还有更多数据
                                mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
                            };
                        } else {
                            mui('#pullrefresh').pullRefresh().endPullup(true);
                        }
                    });
                },
                //去具体的详情
                goInfo: function(id) {
                    var web = null;
                    web = _openHref({
                        url: 'huoqi-kon-info.html',
                        id: 'huoqiKonInfo'
                    });
                    setTimeout(function() {
                        web.evalJS("send('" + id + "')");
                    }, 200);
                }
            }
        });
        mui.init({
            pullRefresh: {
                container: '#pullrefresh',
                up: {
                    contentrefresh: '正在加载...',
                    contentnomore: "暂无更多数据",
                    callback: pullupRefresh
                }
            }
        });

        function pullupRefresh() {
            $('#no-date').remove();
            if (mui.os.plus) {
                mui.plusReady(function() {
                    setTimeout(function() {
                        app.$data.page += 1;
                        app.getData();
                    }, 500);
                });
            } else {}
        };
    </script>
</body>

</html>